<template>
    <!-- 左侧导航 -->
    <el-row class="tac">
        <el-col :span="50">
            <el-menu
                default-active="/admin/Dashboard"
                class="el-menu-vertical-demo"
                router
                @open="handleOpen"
                @close="handleClose"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
                <!-- 购物车，收藏，网站信息 -->
                 <!-- 系统管理 -->
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-setting"></i>
                        <span>系统管理</span>
                    </template>
                    <el-menu-item index="/admin/DishCart">
                        <i class="el-icon-shopping-cart"></i>
                        <span>购物车管理</span>
                    </el-menu-item>
                    <el-menu-item index="/admin/Collection">
                        <i class="el-icon-star-off"></i>
                        <span>收藏管理</span>
                    </el-menu-item>
                    <el-menu-item index="/admin/WebsiteInfo">
                        <i class="el-icon-info"></i>
                        <span>网站信息管理</span>
                    </el-menu-item>
                </el-submenu>
                
                <!-- 网站新闻管理 -->
                <el-menu-item index="/admin/news">
                    <i class="el-icon-document"></i>
                    <span slot="title">新闻管理</span>
                </el-menu-item>
                
                <!-- 会员信息管理 -->
                <el-menu-item index="/admin/members">
                    <i class="el-icon-user"></i>
                    <span slot="title">会员管理</span>
                </el-menu-item>
                
                <!-- 酒店商品信息管理 -->
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-shopping-bag-2"></i>
                        <span>商品管理</span>
                    </template>
                    <el-menu-item index="/admin/rooms">
                        <i class="el-icon-office-building"></i>
                        <span>房间管理</span>
                    </el-menu-item>
                    <el-menu-item index="/admin/seats">
                        <i class="el-icon-chair"></i>
                        <span>座位管理</span>
                    </el-menu-item>
                    <el-menu-item index="/admin/dishes">
                        <i class="el-icon-dish"></i>
                        <span>菜品管理</span>
                    </el-menu-item>
                    <el-menu-item index="/admin/DishCategory">
                        <i class="el-icon-dish"></i>
                        <span>菜品分类管理</span>
                    </el-menu-item>
                </el-submenu>
                
                <!-- 订单管理 -->
                <el-submenu index="4">
                    <template slot="title">
                        <i class="el-icon-document-copy"></i>
                        <span>订单管理</span>
                    </template>
                    <el-menu-item index="/admin/room-orders">
                        <i class="el-icon-office-building"></i>
                        <span>房间订单</span>
                    </el-menu-item>
                    <el-menu-item index="/admin/seat-orders">
                        <i class="el-icon-chair"></i>
                        <span>座位订单</span>
                    </el-menu-item>
                    <el-menu-item index="/admin/dish-orders">
                        <i class="el-icon-dish"></i>
                        <span>菜品订单</span>
                    </el-menu-item>
                    <el-menu-item index="/admin/DishOrderItem">
                        <i class="el-icon-dish"></i>
                        <span>菜品订单详情</span>
                    </el-menu-item>
                </el-submenu>
                
                <!-- 留言管理 -->
                <el-menu-item index="/admin/messages">
                    <i class="el-icon-chat-dot-round"></i>
                    <span slot="title">留言管理</span>
                </el-menu-item>
                
                <!-- 评价管理 -->
                <el-menu-item index="/admin/comments">
                    <i class="el-icon-star-off"></i>
                    <span slot="title">评价管理</span>
                </el-menu-item>
            </el-menu>
        </el-col>
    </el-row>
</template>

<script>
export default {
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    }
}
</script>
<style>
/* 导航容器整体样式 */
.el-row.tac {
  min-height: 100vh; /* 撑满整个视口高度 */
  background-color: #f5f7fa;
  padding: 0;
  margin: 0;
}

/* 侧边栏列样式调整 */
.el-col {
  
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1); /* 右侧阴影增强层次感 */
}
/* 垂直菜单基础样式优化 */
.el-menu-vertical-demo {
  width: 100%;
  height: 100%;
  border-right: none; /* 移除右侧边框 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 一级菜单标题样式 */
.el-menu .el-submenu__title,
.el-menu .el-menu-item {
  height: 60px; /* 增大菜单项高度，提升点击区域 */
  line-height: 60px; /* 文字垂直居中 */
  padding-left: 30px !important; /* 调整左侧内边距 */
  font-size: 15px; /* 调整字体大小 */
  transition: all 0.2s; /* 过渡效果 */
}

/* 二级菜单样式 */
.el-submenu .el-menu {
  background-color: #485058; /* 二级菜单背景色稍浅 */
}

.el-submenu .el-menu-item {
  padding-left: 50px !important; /* 二级菜单缩进更多 */
  height: 50px;
  line-height: 50px;
  font-size: 14px;
}

/* 图标样式调整 */
.el-menu i {
  margin-right: 12px; /* 图标与文字间距 */
  font-size: 18px; /* 图标大小 */
  width: 24px; /* 图标宽度固定，对齐更整齐 */
  text-align: center;
}

/* 悬停效果 */
.el-menu .el-submenu__title:hover,
.el-menu .el-menu-item:hover {
  background-color: #424850 !important; /* 悬停背景色变化 */
  /*padding-left: 35px !important;  悬停时轻微左移 */
}

.el-submenu .el-menu-item:hover {
  padding-left: 55px !important;
}

/* 激活状态样式 */
.el-menu .el-menu-item.is-active {
  border-left: 4px solid #ffd04b; /* 左侧激活指示线 */
  background-color: #424850 !important;
  padding-left: 26px !important; /* 配合指示线调整位置 */
}

.el-submenu .el-menu-item.is-active {
  padding-left: 46px !important;
}

/* 展开/收起动画优化 */
.el-submenu .el-submenu__list {
  animation: slideDown 0.3s ease forwards; /* 展开动画 */
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 解决菜单折叠/展开时的闪烁问题 */
.el-menu--vertical .el-submenu .el-submenu__icon-arrow {
  transition: transform 0.3s; /* 箭头旋转过渡 */
}

/* 响应式调整 - 小屏幕适配 */
@media (max-width: 768px) {
  .el-col {
    width: 80px !important; /* 收缩宽度 */
  }
  
  .el-menu .el-submenu__title span,
  .el-menu .el-menu-item span {
    display: none; /* 隐藏文字 */
  }
  
  .el-menu .el-submenu__title,
  .el-menu .el-menu-item {
    padding-left: 0 !important; /* 重置内边距 */
    text-align: center; /* 图标居中 */
  }
  
  .el-menu i {
    margin-right: 0; /* 移除图标右侧间距 */
  }
  
  .el-menu .el-menu-item.is-active {
    border-left: none; /* 移除左侧指示线 */
    background-color: #424850 !important;
  }
}
</style>